<template>
    <div class="mod-index-main" id="js-main">
        <div class="main-hd">
            <div class="main-player">

                <div :class="isPC?'carousel_container_pc':'carousel_container'">

                    <swiper ref="mySwiper" :options="swiperOptions">
                        <div class="swiper-slide" v-for="item in initBannerList"
                            :style="{backgroundImage:'url(' + item.imgBase + ')'}" @click="detail(item.liveLink)"></div>
                        <div class="swiper-pagination" slot="pagination"></div>
                    </swiper>
                </div>
            </div>
        </div>
        
        <div class="main-bd ">
            <ul class="item-nav clearfix">
                <li :recommendsite="index+1" v-for="(item,index) in initBannerList" class="current" @click="gotoside(index)">
                    <div class="item-pic">
                        <img class="index-first-img" alt="今天播什么"
                            :data-imgsource="item.imgBase"
                            :src="item.imgBase"
                            style="visibility: visible;">
                        <span class="img-mask"></span>
                        <div class="highlight" v-if="index==currentPicSel"><i class="arrow"></i></div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

</template>

<script>
    import { bannerList } from '../../../utils/bannerConfig.js'
    import $ from 'jquery';
    export default {
        name: 'carrousel',
        data() {
            const _self=this;
            return {
                initBannerList: bannerList,
                isPC: false,
                currentPicSel:0,
                activeIndex1:0,
                swiperOptions: {
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    //自动播放
                    autoplay: {
                        delay: 2000,
                        disableOnInteraction: false
                    },
                    //循环
                    loop: true,
                    
                    on: {
                        slideChangeTransitionStart: function () {
                            _self.currentPicSel=this.activeIndex==8?0:this.activeIndex-1
                        }
                    }
                },
            }
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.$swiper
            }
        },
        mounted() {
            this.getBanner()
            this.swiper.slideTo(3, 1000, false)
        },
        methods: {
            getBanner() {
                this.$axios.get('/api/projectApi/getBanner').then((res) => {
                    if (res.data.code == "0") {
                        this.initBannerList = res.data.data;
                    }
                }, (err) => {
                }).then(() => {

                }, (err) => {
                })
            },
            detail(link) {
                console.log(link)
                window.open(link, 'top')
            },
            gotoside(index){
                $(".swiper-pagination span").eq(index).trigger("click")
                this.currentPicSel=index;

                console.log("activeIndex1:"+this.activeIndex1)
            },
        }
    }

</script>

<style scoped>
    .carousel_container {
        width: 100%;
        height: auto;
        padding-bottom: 0%;
        position: relative;
        background-color: #f2f2f2;
    }

    .swiper-container {
        position: static;
    }

    .swiper-slide {
        padding-top: 0;
        float: none;
        width: 100%;
        padding-bottom: 30.8%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: block;
        height: 390px;
    }
    .mod-index-main .main-bd li.current .highlight {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 2px solid #ff9c00;
        border-radius: 6px;
    }
    .swiper-pagination-bullet {
        width: 60px;
        height: 8px;
        display: inline-block;
        border-radius: 10px;
        background: #000;
        opacity: 0.2;
    }
    .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{

        background: #9c9c9c;
    }
    .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
        opacity: 1;
        background: linear-gradient(177deg, #FF812D 0%, #E02020 100%);
    }
    .w-980 .mod-index-main {
        width: 999px;
        min-width: 999px;
        height: 390px;
        margin-top: 78px;
    }
</style>